<template>
    <div class="block" id="tuao">
        <span class="demonstration" style="margin-right: 5px ;font-size: 14px;font-weight: 700 ">楼栋/单元：</span>
        <el-cascader :props="props" size="mini" @change="val" ref="aaa"></el-cascader>

        <span class="tuao" style="margin-right: 5px ;font-size: 14px;font-weight: 700 ;margin-left: 30px"> 房屋状态</span>
        <el-select v-model="abc" size="mini" placeholder="请选择房屋状态" style="margin-right: 30px">
            <el-option
                    v-for="item in statuslist"
                    :label="item.dictLabel"
                    :value="item.dictLabel">
            </el-option>
        </el-select>

        <!--        <el-select v-model="zyroom.roomStatus" placeholder="请选择" style="width: 180px;">-->
        <!--            <el-option-->
        <!--                    v-for="status in statuslist"-->
        <!--                    :label="status.dictLabel"-->
        <!--                    :value="status.dictLabel">-->
        <!--            </el-option>-->
        <!--        </el-select>-->


        <el-button type="primary" icon="el-icon-search" size="mini" @click="showRooms">搜索</el-button>

        <el-button type="info" size="mini" plain @click="reset('aaa')">重置按钮</el-button>
        <br>
        <br>
        <div>
            <!--            <el-button type="primary" icon="el-icon-plus" @click="show">新增</el-button>-->
            <!--            <el-button type="danger" icon="el-icon-delete">删除</el-button>-->
            <!--            <el-button type="warning" icon="el-icon-download">导出</el-button>-->

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="primary" class="el-icon-plus" size="mini" @click="show" plain>新增</el-button>
            </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="danger" class="el-icon-delete" size="mini" disabled>删除</el-button>
            </el-row>

            <el-row style="display: inline-block; margin-right: 15px">
                <el-button type="warning" class="el-icon-download" size="mini" plain @click="excelUpload">导出</el-button>
            </el-row>
        </div>
        <!--    添加-->
        <el-dialog title="添加房屋" :visible.sync="dialogFormVisible">
            <el-form :model="zyroom">

                <el-form-item label="楼栋/单元" :label-width="formLabelWidth">
                    <el-cascader :props="props" style="width: 180px;position: absolute"
                                 @change="val1"></el-cascader>
                </el-form-item>
                <!--                <el-form-item label="楼栋" :label-width="formLabelWidth">-->
                <!--                    <el-select v-model="zyroom.buildingId" placeholder="请选择" style="width: 180px;">-->
                <!--                        <el-option-->
                <!--                                v-for="a in list"-->
                <!--                                :label="a.buildingName"-->
                <!--                                :value="a.buildingId">-->
                <!--                        </el-option>-->
                <!--                    </el-select>-->
                <!--                </el-form-item>-->

                <el-form-item label="楼层" :label-width="formLabelWidth">
                    <el-input v-model="zyroom.roomLevel" style="width: 350px;"
                              autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="房屋名称" :label-width="formLabelWidth">
                    <el-input v-model="zyroom.roomName" autocomplete="off" style="width: 350px;"></el-input>
                </el-form-item>

                <el-form-item label="建筑面积" :label-width="formLabelWidth">
                    <el-input v-model="zyroom.roomAcreage" autocomplete="off" style="width: 350px;"></el-input>
                </el-form-item>

                <el-form-item label="算费系数" :label-width="formLabelWidth">
                    <el-input v-model="zyroom.roomCost" autocomplete="off" style="width: 350px;"></el-input>
                </el-form-item>

                <el-form-item label="房屋状态" :label-width="formLabelWidth">
                    <el-select v-model="zyroom.roomStatus" placeholder="请选择" style="width: 180px;">
                        <el-option
                                v-for="status in statuslist"
                                :label="status.dictLabel"
                                :value="status.dictLabel">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="是否商品" :label-width="formLabelWidth">
                    <div>
                        <el-radio-group v-model="zyroom.roomIsShop" style="width: 180px;">
                            <el-radio :label=yesnolist[0].dictLabel>是</el-radio>
                            <el-radio :label=yesnolist[1].dictLabel>否</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>

                <el-form-item label="是否商品房" :label-width="formLabelWidth">
                    <div>
                        <el-radio-group v-model="zyroom.roomSCommercialHouse" style="width: 180px;">
                            <el-radio :label=yesnolist[0].dictLabel>是</el-radio>
                            <el-radio :label=yesnolist[1].dictLabel>否</el-radio>
                        </el-radio-group>
                    </div>
                </el-form-item>

                <el-form-item label="房屋户型" :label-width="formLabelWidth" style="width: 180px;">
                    <el-select v-model="zyroom.roomHouseType" placeholder="请选择" style="width: 180px;">
                        <el-option
                                v-for="state in houselist"
                                :label="state.dictLabel"
                                :value="state.dictLabel">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="zyroom.remark" placeholder="请输入内容" style="width: 350px"
                              autocomplete="off"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="savezyrooms">确 定</el-button>
            </div>
        </el-dialog>


        <el-table
                :data="zyrooms"
                style="width: 100%;text-align: center"
                @selection-change="handleSelectionChange">
            <el-table-column type="selection">
            </el-table-column>
            <el-table-column
                    label="序号"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{scope.row.roomId}}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="小区名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyCommunity.communityName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="楼栋名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyBuilding.buildingName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="单元名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.zyUnit.unitName }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="楼层"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomLevel }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="房间名称"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomName }}</span>
                </template>
            </el-table-column>
<!--            <el-table-column-->
<!--                    label="房间编号"-->
<!--                    width="100px">-->
<!--                <template slot-scope="scope">-->
<!--                    <span>{{ scope.row.roomCode }}</span>-->
<!--                </template>-->
<!--            </el-table-column>-->
            <el-table-column
                    label="房间建筑面积"
                    width="110px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomAcreage }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="算费系数"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomCost }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="房屋状态"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomStatus }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否商铺"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomIsShop }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="是否商品房"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomSCommercialHouse }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="房屋户型"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.roomHouseType }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="创建时间"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.createTime }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="备注"
                    width="100px">
                <template slot-scope="scope">
                    <span>{{ scope.row.remark }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作"
                             width="200px">
                <template slot-scope="scope">
                    <el-link icon="el-icon-edit" @click="huixian(scope.$index,scope.row)">修改</el-link>

                    <el-link icon="el-icon-delete" @click="del(scope.$index,scope.row)">删除</el-link>
                </template>
            </el-table-column>
        </el-table>

        <!--        //分页-->
        <el-pagination
                background
                :page-size="size"
                :current-page="current"
                layout="prev, pager, next"
                @current-change="showRooms"
                :total="total">
        </el-pagination>
    </div>
</template>

<script>
    import axios from "axios";

    let lx = false;

    export default {
        name: "Room",
        data() {
            return {
                houselist: [],
                statuslist: [],
                yesnolist: [],
                dialogFormVisible: false,
                zyrooms: [],
                total: 0,//人员总数
                current: 1,//当前页数
                size: 4,
                formLabelWidth: "200px",
                abc: "",
                zyroom: {
                    communityName: "",
                    communityId: 0,
                    buildingId: "",
                    unitId: 0,
                    zyBuilding: {
                        buildingName: ""
                    },
                    unitName: "",
                    roomId: "",
                    roomLevel: "",
                    roomCode: "",
                    roomName: "",
                    roomAcreage: "",
                    roomCost: "",
                    roomStatus: "",
                    roomIsShop: "",
                    roomSCommercialHouse: "",
                    roomHouseType: "",
                    createTime: "",
                    remark: "",
                    nodes1: [],
                    nodes2: []
                },
                list: [],
                props: {
                    lazy: true,
                    lazyLoad(node, resolve) {
                        setTimeout(() => {
                            // 第一級
                            if (node.level === 0) {
                                // Ajax請求數據，填充選擇框
                                axios.get("http://localhost:8080/zybuildings")
                                    .then(res => {
                                        this.nodes1 = res.data.data.map((item, index) => ({
                                            value: item.buildingId,
                                            label: item.buildingName,
                                            // leaf:node.level >= 2
                                        }));
                                        resolve(this.nodes1);
                                    })
                            }
                            // 第二級
                            if (node.level === 1) {
                                // Ajax請求數據，填充選擇框，传入上一級參數
                                axios.get("http://localhost:8080/zyUnit/" + node.label).then(res => {
                                    this.nodes2 = res.data.data.map((item, index) => ({
                                        value: item.unitId,
                                        label: item.unitName,
                                        leaf: node.level == 1
                                    }));
                                    resolve(this.nodes2);
                                })
                            }

                        }, 300);
                    }
                },
                //模糊查询传给后台的对象
                house: {
                    buildingName: "",
                    unitName: "",
                    roomStatus: ""
                },
                options1: [{
                    value: '选项1',
                    label: '出售'
                }, {
                    value: '选项2',
                    label: '未出售'
                }],
                value1: ''
            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            showRooms(current) {
                this.current = 1;
                if (current > 1) {
                    this.current = current;

                }
                this.axios.get("http://localhost:8080/zyroom/page/fuzzy?current=" + this.current + "&size=" + this.size + "&roomStatus=" + this.abc + "&communityName=" + "恒大城三期" + "&unitName=" + this.house.unitName + "&buildingName=" + this.house.buildingName)
                    .then(res => {
                        console.log(res)
                        this.zyrooms = res.data.data.records;
                        this.current = res.data.data.current;
                        this.total = res.data.data.total;
                    })
            },
            //回显
            huixian(index, row) {
                // this.zyrooms = JSON.parse(JSON.stringify(row));
                lx = true;

                this.dialogFormVisible = true;
                this.zyroom.roomId = row.roomId;
                this.zyroom.roomLevel = row.roomLevel;
                this.zyroom.roomName = row.roomName;
                this.zyroom.roomStatus = row.roomStatus;
                this.zyroom.roomAcreage = row.roomAcreage;
                this.zyroom.roomHouseType = row.roomHouseType;
                this.zyroom.roomCost = row.roomCost;
                this.zyroom.roomIsShop = row.roomIsShop;
                this.zyroom.roomSCommercialHouse = row.roomSCommercialHouse;
                this.zyroom.remark = row.remark;

            },
            //
            savezyrooms() {
                if (!lx) {
                    this.axios.post("http://localhost:8080/zyroom", this.zyroom)
                        .then(res => {
                            if (res.data.status == "OK") {
                                this.$message({
                                    message: '添加成功！',
                                    type: 'success'
                                });
                                this.dialogFormVisible = false;
                                this.showRooms(this.current);
                            }
                        })
                } else {
                    this.axios.put("http://localhost:8080/zyroom", this.zyroom)
                        .then(res => {
                            if (res.data.status == "OK") {
                                this.$message({
                                    message: '修改成功！',
                                    type: 'success'
                                });
                            }
                        });
                    lx = false;
                    this.dialogFormVisible = false;
                    this.showRooms(1);
                    // this.showRooms(this.current);
                }

            },
            show() {
                this.dialogFormVisible = true;
                this.zyroom = {
                    communityName: "",
                    communityId: 0,
                    buildingId: "",
                    unitId: 0,
                    zyBuilding: {
                        buildingName: ""
                    },
                    unitName: "",
                    roomId: "",
                    roomLevel: "",
                    roomCode: "",
                    roomName: "",
                    roomAcreage: "",
                    roomCost: "",
                    roomStatus: "",
                    roomIsShop: "",
                    roomSCommercialHouse: "",
                    roomHouseType: "",
                    createTime: "",
                    remark: ""
                }
            },
            del(index, row) {
                if (confirm("是否删除？")) {
                    console.log(row);
                    this.axios.delete("http://localhost:8080/zyroom/" + row.roomId)
                        .then(res => {
                            if (res.data.data == "删除成功") {
                                alert("删除成功");
                                this.showRooms(this.current);
                            }
                        })
                }

            },
            excelUpload() {
                this.axios({
                    method: "post",
                    url: "http://localhost:8080/zyroom/export",
                    data: this.zyrooms,
                    responseType: "blob"
                }).then(res => {
                    if (res && res.data) {
                        // 调用js-file-download下载文件，第一个参数是数据流，第二个参数是文件名，我这后端返回时把文件名放到响应的header的filename字段中，所以用这种方式取出
                        this.jsFileDownload(res.data, decodeURIComponent("房屋管理.xlsx"))
                    }
                })
            },
            selectBuilding() {
                this.axios.get("http://localhost:8080/zybuildings")
                    .then(res => {
                        this.list = res.data.data;
                    });
            },
            selectAll() {
                this.axios.get("http://localhost:8080/SysDictData/dictType?dictType=zy_room_state")
                    .then(res => {
                        this.statuslist = res.data.data;
                    })
                this.axios.get("http://localhost:8080/SysDictData/dictType?dictType=sys_yes_no")
                    .then(res => {
                        this.yesnolist = res.data.data;
                    })
                this.axios.get("http://localhost:8080/SysDictData/dictType?dictType=zy_house_state")
                    .then(res => {
                        this.houselist = res.data.data;

                    })
            },
            /**
             * 模糊查询
             */
            searchByFuzzy() {
                console.log(this.house.buildingName);
                console.log(this.house.unitName);
            },
            /**
             * 获取级联选择的值，赋给options（eg：19楼,2单元）
             * 拿到buildingName和UnitName
             * @param value
             */
            val(value) {
                this.house.buildingName = value[0];
                this.house.unitName = value[1];
            },
            val1(value) {
                this.zyroom.buildingId = value[0];
                this.zyroom.unitId = value[1];
            },
            reset(name) {
                this.abc = "";
                this.house.unitName = '';
                this.house.buildingName = "";
                //清空动态级联器
                this.$refs[name].$refs.panel.clearCheckedNodes();
                this.showRooms(this.current);
            }


        },
        created() {
            this.showRooms(this.current);
            this.selectBuilding();
            this.selectAll();
        }
    }

</script>

<style scoped>
</style>